<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }
    </style>
    <!-- <script src="../js/scroll.js"></script> -->
    <script src="../../d27/js/jquery.js"></script>
</head>
<body>
    <div class="all" id='all'>
        <div class="screen">
            <ul>
                <li><img src="images/1.jpg" width="500" height="200" /></li>
                <li><img src="images/2.jpg" width="500" height="200" /></li>
                <li><img src="images/3.jpg" width="500" height="200" /></li>
                <li><img src="images/4.jpg" width="500" height="200" /></li>
                <li><img src="images/5.jpg" width="500" height="200" /></li>

            </ul>
        </div>
        <ol>

        </ol>
    </div>
    <script>
    $.fn.extend({
        lunbo() {
            var indeximg = 0;
            var indexport = 0;
            //动态创建最后一张图片
            var $uLi = $('<li><img src="images/1.jpg" width="500" height="200" /></li>');
            $('ul').append($uLi);
            //动态创建oLi
            var oLis = this.children().find('ul li').length - 1;
            var str = ``;
            for (let i = 0; i < oLis; i++) {
                str += `<li class='${i == 0 ? 'current' : ''}'>${i + 1}</li>`;
            }
            this.find('ol').append(str);
            var triem = setInterval(() => {
                indeximg++;
                if (indeximg > 5) {
                    indeximg = 1;
                    this.find('ul').css('left', '0px');
                }
                this.find('ul').animate({ left: indeximg * -500 });
                indexport++;
                if (indexport > 4) {
                    indexport = 0;
                }
                this.find('ol li').eq(indexport).addClass('current').siblings('li').removeClass('current');
            }, 1500)
            //绑定点击事件
            let self = this;
            this.find('ol li').click(function (e) {
                let $index = $(this).index();
                indeximg = indexport = $index - 1;
            })
        }
    })
    $(function () {
        $('#all').lunbo();
    })
        // class Sweiper{
        //     constructor(ele){
        //         this.el=document.querySelector(ele);
        //         this.oUl=this.el.children[0].children[0];
        //         this.oOl=this.el.children[1];
        //         this.imgIndex=0;
        //         this.pointIndex=0;
        //         this.init();
        //         this.mouseHander();

        //         this.timer=setInterval(()=>{
        //             this.imgIndex++;
        //             this.pointIndex++;
        //             this.autoPlay();
        //         },1500)
        //     }

        //     // 初始化
        //     init(){
        //         var df=document.createDocumentFragment();
        //         for(let i=0;i<this.oUl.children.length;i++){
        //             let oLi=document.createElement("li");
        //             oLi.innerHTML=(i+1);
        //             oLi.className=i==0?"current":"";
        //             df.appendChild(oLi);
        //         }
        //         this.oOl.appendChild(df);
        //         this.oUl.appendChild(this.oUl.children[0].cloneNode(true));
        //     }
        //     // 自动轮播
        //     autoPlay(){
        //         if(this.imgIndex>5){
        //             console.log(this.imgIndex);
        //             this.imgIndex=1;
        //             this.oUl.style.left="0px";
        //         }
        //         utils.animate(this.oUl,{left:this.imgIndex*-500});
        //         if(this.pointIndex>4){
        //             this.pointIndex=0;
        //         }
        //         // 排他思想
        //         Array.from(this.oOl.children).forEach((item,index)=>{
        //             item.className=(index==this.pointIndex)?"current":"";
        //         })
        //     }
        //     // 鼠标事件
        //     mouseHander(){
        //         this.el.onmouseenter=()=>{
        //             clearInterval(this.timer);
        //         }
        //         this.el.onmouseleave=()=>{
        //             this.timer=setInterval(()=>{
        //                 this.imgIndex++;
        //                 this.pointIndex++;
        //                 this.autoPlay();
        //             },1500)
        //         }
        //     }
        // }
        // new Sweiper("#all");

        // function Swiper(ele){
        //     this.el=document.querySelector(ele);
        //     this.oUl=this.el.children[0].children[0];
        //     this.oOl=this.el.children[1];
        //     this.imgIndex=0;
        //     this.pointIndex=0;
        //     this.init=function(){
        //         var df=document.createDocumentFragment();
        //         for(let i=0;i<this.oUl.children.length;i++){
        //             let oLi=document.createElement("li");
        //             oLi.innerHTML=(i+1);
        //             oLi.className=i==0?"current":"";
        //             df.appendChild(oLi);
        //         }
        //         this.oOl.appendChild(df);
        //         this.oUl.appendChild(this.oUl.children[0].cloneNode(true));
        //     };
        //     this.mouseHander=function(){
        //         this.el.onmouseenter=()=>{
        //             clearInterval(this.timer);
        //         }
        //         this.el.onmouseleave=()=>{
        //             this.timer=setInterval(()=>{
        //                 this.imgIndex++;
        //                 this.pointIndex++;
        //                 this.autoPlay();
        //             },1500)
        //         }
        //     };
        //     this.autoPlay=function(){
        //         if(this.imgIndex>5){
        //             console.log(this.imgIndex);
        //             this.imgIndex=1;
        //             this.oUl.style.left="0px";
        //         }
        //         utils.animate(this.oUl,{left:this.imgIndex*-500});
        //         if(this.pointIndex>4){
        //             this.pointIndex=0;
        //         }
        //         // 排他思想
        //         Array.from(this.oOl.children).forEach((item,index)=>{
        //             item.className=(index==this.pointIndex)?"current":"";
        //         })
        //     }

        //     this.timer=setInterval(()=>{
        //         this.imgIndex++;
        //         this.pointIndex++;
        //         this.autoPlay();
        //         this.mouseHander();
        //     },1500)
        // }
        // new Swiper("#all").init();
    </script>
</body>
</html>